<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'Img',
	props: {
		preview: {
			type: Boolean,
		},
	},
});
</script>
<template>
	<el-image :src="$attrs.src" fit="cover" preview-teleported :style="`width:${$attrs.width};height:${$attrs.height}`">
		<template #error>
			<div class="image-slot">
				<span v-if="$attrs.uploadable" @click="$emit('upload')">
					<Icon v-if="$attrs.src" name="Picture" />
					<Icon v-else name="Upload" class="upload_btn" />
				</span>
				<Icon v-else name="Picture" />
			</div>
		</template>
	</el-image>
</template>

<style lang="scss" scoped>
.el-image {
	width: 100%;
	height: 100%;
	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #f5f7fa;
		.upload_btn {
			cursor: pointer;
		}
	}
}
</style>
